<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>文档列表 - 光年(Light Year Admin V4)后台管理系统模板</title>
    <link rel="icon" href="favicon.ico" type="image/ico">
    <meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
    <meta name="description" content="Light Year Admin V4是一个后台管理系统的HTML模板，基于Bootstrap v4.4.1。">
    <meta name="author" content="yinqi">
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/materialdesignicons.min.css" rel="stylesheet">
    <link href="../js/jquery-confirm/jquery-confirm.min.css" rel="stylesheet">
    <link href="../css/animate.min.css" rel="stylesheet">
    <link href="../css/style.min.css" rel="stylesheet">
</head>

<body>
<div class="container-fluid p-t-15">

    <div class="row">
        <div class="col-lg-12">
            <div class="card" style="height: 810px">
                <div class="card-toolbar d-flex flex-column flex-md-row">
                    <form class="search-bar" method="get" action="#!" role="form" style="margin-left: 0%;">
                        <table>
                            <tr>
                                <td><input type="text" class="form-control" name="keyword" placeholder="请输入仓库名称或编号"></td>
                                <td><input type="button" class="btn btn-success" style="margin-left: 20px" value="查询"></td>
                            </tr>
                        </table>
                    </form>

                    <div class="toolbar-btn-action" style="margin-left: auto">
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter"><i class="mdi mdi-plus"></i>新增</button>
                    </div>

                    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h6 class="modal-title" id="exampleModalCenterTitle">新增仓库</h6>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <form class="search-bar" method="get" action="#!" role="form" style="margin-left: 0%;">
                                    <div class="modal-body">
                                        <table style="margin: auto">
                                            <tr>
                                                <td>*仓库编号：</td>
                                                <td><input type="text"></td>
                                            </tr>
                                            <tr>
                                                <td>*仓库名：</td>
                                                <td><input type="text"></td>
                                            </tr>
                                            <tr>
                                                <td>*仓库地址：</td>
                                                <td><input type="text"></td>
                                            </tr>
                                            <tr>
                                                <td>备注：</td>
                                                <td><input type="text"></td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                        <button type="button" class="btn btn-primary">保存</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">

                    <div class="table-responsive" style="height: auto;">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th>仓库编号</th>
                                <th>仓库名称</th>
                                <th>仓库地址</th>
                                <th>备注</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>CK001</td>
                                <td>默认仓库</td>
                                <td>曹县工业园</td>
                                <td>默认的初始仓库</td>
                                <td><font class="text-success">正常</font></td>
                                <td>
                                    <div class="btn-group">
                                        <a class="btn btn-xs btn-default" href="#!" title="" data-toggle="tooltip" data-original-title="编辑"><i class="mdi mdi-pencil"></i></a>
                                        <a class="btn btn-xs btn-default ajax-get confirm" href="http://www.lyear.com/doc_test.php?id=1" title="" data-toggle="tooltip" data-original-title="删除"><i class="mdi mdi-window-close"></i></a>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <ul class="pagination" style="margin-top: 550px;">
                        <li class="page-item disabled"><span class="page-link">上一页</span></li>
                        <li class="page-item active"><span class="page-link">1</span></li>
                        <li class="page-item"><a class="page-link" href="#1">2</a></li>
                        <li class="page-item"><a class="page-link" href="#1">3</a></li>
                        <li class="page-item"><a class="page-link" href="#1">4</a></li>
                        <li class="page-item"><a class="page-link" href="#1">5</a></li>
                        <li class="page-item disabled"><span class="page-link">...</span></li>
                        <li class="page-item"><a class="page-link" href="#!">98</a></li>
                        <li class="page-item"><a class="page-link" href="#!">99</a></li>
                        <li class="page-item"><a class="page-link" href="#!">下一页</a></li>
                    </ul>

                </div>
            </div>
        </div>
    </div>

</div>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/popper.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/lyear-loading.js"></script>
<script type="text/javascript" src="../js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="../js/jquery-confirm/jquery-confirm.min.js"></script>
<script type="text/javascript" src="../js/main.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('.search-bar .dropdown-menu a').click(function() {
            var field = $(this).data('field') || '';
            $('#search-field').val(field);
            $('#search-btn').html($(this).text());
        });

        // 通用ajax post请求
        jQuery(document).delegate('.ajax-post', 'click', function(){
            var self        = jQuery(this), tips = self.data('tips'), ajax_url = self.attr("href") || self.data("url");
            var target_form = self.attr('target-form');
            var text        = self.data('tips');
            var form        = jQuery('form[name="'+ target_form +'"]');

            if (form.length == 0) {
                form = jQuery('.' + target_form);
            }

            var form_data = form.serialize();
            if ('submit' == self.attr('type') || ajax_url) {
                if (void 0 == form.get(0)) return false;

                // 如果节点是FORM表单
                if ('FORM' == form.get(0).nodeName) {
                    ajax_url = ajax_url || form.get(0).action;

                    // 确认提交
                    if (self.hasClass('confirm')) {
                        $.confirm({
                            title: '',
                            content: tips || '确认要执行该操作吗？',
                            type: 'orange',
                            typeAnimated: true,
                            buttons: {
                                confirm: {
                                    text: '确认',
                                    btnClass: 'btn-blue',
                                    action: function() {
                                        var loader = $('body').lyearloading({
                                            opacity: 0.2,
                                            spinnerSize: 'lg'
                                        });
                                        self.attr('autocomplete', 'off').prop('disabled', true);
                                        ajaxPostFun(self, ajax_url, form_data, loader);
                                    }
                                },
                                cancel: {
                                    text: '取消',
                                    action: function() {}
                                }
                            }
                        });
                        return false;
                    } else {
                        self.attr("autocomplete", "off").prop("disabled", true);
                    }
                } else if ('INPUT' == form.get(0).nodeName || 'SELECT' == form.get(0).nodeName || 'TEXTAREA' == form.get(0).nodeName) {
                    // 复选框判断是否有选择项
                    if (form.get(0).type == 'checkbox' && form_data == '') {
                        showNotify('请选择您要操作的数据', 'danger');
                        return false;
                    }

                    if (self.hasClass('confirm')) {
                        $.confirm({
                            title: '',
                            content: tips || '确认要执行该操作吗？',
                            type: 'orange',
                            typeAnimated: true,
                            buttons: {
                                confirm: {
                                    text: '确认',
                                    btnClass: 'btn-blue',
                                    action: function() {
                                        var loader = $('body').lyearloading({
                                            opacity: 0.2,
                                            spinnerSize: 'lg'
                                        });
                                        self.attr('autocomplete', 'off').prop('disabled', true);

                                        ajaxPostFun(self, ajax_url, form_data, loader);
                                    }
                                },
                                cancel: {
                                    text: '取消',
                                    action: function() {}
                                }
                            }
                        });
                        return false;
                    } else {
                        self.attr("autocomplete", "off").prop("disabled", true);
                    }
                } else {
                    if (self.hasClass('confirm')) {
                        $.confirm({
                            title: '',
                            content: tips || '确认要执行该操作吗？',
                            type: 'orange',
                            typeAnimated: true,
                            buttons: {
                                confirm: {
                                    text: '确认',
                                    btnClass: 'btn-blue',
                                    action: function() {
                                        var loader = $('body').lyearloading({
                                            opacity: 0.2,
                                            spinnerSize: 'lg'
                                        });
                                        self.attr('autocomplete', 'off').prop('disabled', true);

                                        ajaxPostFun(self, ajax_url, form_data, loader);
                                    }
                                },
                                cancel: {
                                    text: '取消',
                                    action: function() {}
                                }
                            }
                        });
                        return false;
                    } else {
                        form_data = form.find("input,select,textarea").serialize();
                        self.attr("autocomplete", "off").prop("disabled", true);
                    }
                }

                var loader = $('body').lyearloading({
                    opacity: 0.2,
                    spinnerSize: 'lg'
                });
                ajaxPostFun(self, ajax_url, form_data, loader);

                return false;
            }
        });

        // 通用ajax get请求
        jQuery(document).delegate('.ajax-get', 'click', function(){
            var self = $(this), tips = self.data('tips'), ajax_url = self.attr("href") || self.data("url");

            if (self.hasClass('confirm')) {
                $.confirm({
                    title: '',
                    content: tips || '确认要执行该操作吗？',
                    type: 'orange',
                    typeAnimated: true,
                    buttons: {
                        confirm: {
                            text: '确认',
                            btnClass: 'btn-blue',
                            action: function() {
                                var loader = $('body').lyearloading({
                                    opacity: 0.2,
                                    spinnerSize: 'lg'
                                });
                                self.attr('autocomplete', 'off').prop('disabled', true);

                                ajaxGetFun(self, ajax_url, loader);
                            }
                        },
                        cancel: {
                            text: '取消',
                            action: function() {}
                        }
                    }
                });
                return false;
            } else {
                var loader = $('body').lyearloading({
                    opacity: 0.2,
                    spinnerSize: 'lg'
                });
                self.attr('autocomplete', 'off').prop('disabled', true);

                ajaxGetFun(self, ajax_url, loader);
            }
            return false;
        });

        // POST提交处理
        function ajaxPostFun(selfObj, ajax_url, form_data, loader) {
            console.log('url==>'+ajax_url);
            console.log('form_data==>'+form_data);
            setTimeout(function() {
                loader.destroy();
                showNotify('修改成功，页面即将自动跳转~', 'success', 1000);
                selfObj.attr("autocomplete", "on").prop("disabled", false);
            }, 1e3);
            // 这里屏蔽get提交，js模拟返回成功，正常使用时请删除上面的内容，打开下面的注释代码
            /*
            jQuery.post(ajax_url, form_data).done(function(res) {
                loader.destroy();
                var res = eval('(' + res + ')');
                var msg = res.msg;
                if (200 == res.code) {
                    if (res.url && !selfObj.hasClass('no-refresh')) {
                        msg += '页面即将自动跳转';
                    }
                    showNotify(msg, 'info');
                    setTimeout(function () {
                        selfObj.attr("autocomplete", "on").prop("disabled", false);
                        return selfObj.hasClass("no-refresh") ? false : (res.url ? location.href = res.url : location.reload());
                    }, 1500);
                } else {
                    showNotify(msg, 'danger');
                    selfObj.attr("autocomplete", "on").prop("disabled", false);
                }
            }).fail(function () {
                loader.destroy();
                showNotify('服务器发生错误，请稍后再试', 'danger');
                selfObj.attr("autocomplete", "on").prop("disabled", false);
            });
            */
        }

        // GET提交处理
        function ajaxGetFun(selfObj, ajax_url, loader) {
            console.log(ajax_url);
            setTimeout(function() {
                loader.destroy();
                showNotify('修改成功，页面即将自动跳转~', 'success', 1000);
                selfObj.attr("autocomplete", "on").prop("disabled", false);
            }, 1e3);
            // 这里屏蔽get提交，js模拟返回成功，正常使用时请删除上面的内容，打开下面的注释代码
            /*
            jQuery.get(ajax_url).done(function(res) {
                loader.destroy();
                var res = eval('(' + res + ')');
                var msg = res.msg;
                if (200 == res.code) {
                    if (res.url && !selfObj.hasClass('no-refresh')) {
                        msg += '页面即将自动跳转';
                    }
                    showNotify(msg, 'info');
                    setTimeout(function () {
                        selfObj.attr("autocomplete", "on").prop("disabled", false);
                        return selfObj.hasClass("no-refresh") ? false : (res.url ? location.href = res.url : location.reload());
                    }, 1500);
                } else {
                    showNotify(msg, 'danger');
                    selfObj.attr("autocomplete", "on").prop("disabled", false);
                }
            }).fail(function () {
                loader.destroy();
                showNotify('服务器发生错误，请稍后再试', 'danger');
                selfObj.attr("autocomplete", "on").prop("disabled", false);
            });
            */
        }

        /*
         * 提取通用的通知消息方法
         * 这里只采用简单的用法，如果想要使用回调或者更多的用法，请查看lyear_js_notify.html页面
         * @param $msg 提示信息
         * @param $type 提示类型:'info', 'success', 'warning', 'danger'
         * @param $delay 毫秒数，例如：1000
         * @param $icon 图标，例如：'fa fa-user' 或 'glyphicon glyphicon-warning-sign'
         * @param $from 'top' 或 'bottom' 消息出现的位置
         * @param $align 'left', 'right', 'center' 消息出现的位置
         */
        function showNotify($msg, $type, $delay, $icon, $from, $align) {
            $type  = $type || 'info';
            $delay = $delay || 1000;
            $from  = $from || 'top';
            $align = $align || 'right';
            $enter = $type == 'danger' ? 'animated shake' : 'animated fadeInUp';

            jQuery.notify({
                    icon: $icon,
                    message: $msg
                },
                {
                    element: 'body',
                    type: $type,
                    allow_dismiss: true,
                    newest_on_top: true,
                    showProgressbar: false,
                    placement: {
                        from: $from,
                        align: $align
                    },
                    offset: 20,
                    spacing: 10,
                    z_index: 10800,
                    delay: $delay,
                    animate: {
                        enter: $enter,
                        exit: 'animated fadeOutDown'
                    }
                });
        }
    });
</script>
</body>
</html>